<template>
  <div class="highSeasCustomer">
    <SearchCriteria ref="child" @sendMessage="getMessage"></SearchCriteria>
    <div class="main">
      <div class="top">
        <el-button @click="openAssignment" :disabled="isAssignDisable"
          >批量分配</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="550"
        @selection-change="handleSelectionChange"
        ref="mainTable"
        v-loading="loadingrefresh"
      >
        <el-table-column type="selection" width="45" align="center" fixed>
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          fixed
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sid"
          label="客户号"
          align="center"
          :min-width="200"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          :min-width="100"
          fixed
        >
          <template slot-scope="scope">
            {{ scope.row.name || "-" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="customerWay"
          label="获客来源"
          align="center"
          :min-width="200"
          fixed="left"
        >
          <template slot-scope="scope">
            {{ scope.row.customerWay || '-' }}
          </template>
        </el-table-column>
        <div v-for="(item, i) in tableList" :key="i">
          <el-table-column
            width="80"
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.label == '分配状态'"
          >
            <template slot-scope="scope">
              <el-tag
                type="success"
                v-if="scope.row.distributionState === '已分配'"
                >已分配</el-tag
              >
              <el-tag
                type="warning"
                v-if="scope.row.distributionState === '待分配'"
                >待分配</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-else-if="item.label == '企微添加状态'"
          >
            <template slot-scope="scope">
              <span
                class="wecomAdd1"
                v-if="scope.row.wecomAddState === '已添加'"
                >已添加</span
              >
              <span
                class="wecomAdd2"
                v-if="scope.row.wecomAddState === '待添加'"
                >待添加</span
              >
              <span
                class="wecomAdd3"
                v-if="scope.row.wecomAddState === '已删除'"
                >已删除</span
              >
            </template>
          </el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-else
            :width="160"
            show-overflow-tooltip
          >
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row[item.prop] || "-" }}-->
<!--            </template>-->
<!--            <template slot-scope="scope">-->
<!--              <el-popover placement="top" trigger="hover" v-if="scope.row[item.prop] && scope.row[item.prop].length > 6">-->
<!--                <template>-->
<!--                  <div class="set-popper">{{scope.row[item.prop]}}</div>-->
<!--                </template>-->
<!--                <div slot="reference" class="set-content">-->
<!--                  {{ scope.row[item.prop] }}-->
<!--                </div>-->
<!--              </el-popover>-->
<!--              <div v-else>{{scope.row[item.prop] || '-' }}</div>-->
<!--            </template>-->
          </el-table-column>
        </div>
        <!--        <el-table-column prop="createTime" label="创建时间" align="center" :width="160">-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="createTime"
          label="操作"
          width="60"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column width="35" fixed="right">
          <template slot="header">
            <i class="el-icon-setting" @click="openShowList"></i>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="message.pageNum" :pageSize="message.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <el-dialog title="选择需要展示的数据项" :visible.sync="dialogFormVisible">
      <ShowData @sendDataList="getDataList" ref="showDataList"></ShowData>
    </el-dialog>
    <!-- 筛选侧边栏 -->
    <el-drawer
      title="筛选数据项"
      :visible.sync="dialogLeft"
      direction="ltr"
      custom-class="demo-drawer"
      size="20%"
    >
      <screenList
        ref="screenList"
        @sendScreenMessage="getScreenList"
        @sendKeepList="getKeepList"
      ></screenList>
    </el-drawer>
    <!-- 分配 -->
    <Assignment
      ref="assignment"
      :assignTotal="assignTotal"
      @sendAssignInfo="getAssignInfo"
      @sendResult="getResult"
    >
    </Assignment>
  </div>
</template>
<script>
import SearchCriteria from "../components/searchCriteria.vue";
import ScreenList from "../components/screenList.vue";
import ShowData from "../components/showData.vue";
import Assignment from "../components/Assignment";
import {
  distributeCus,
  getAllCustomerInfo,
} from "@/api/customer/customerManage";

export default {
  name: "highSeasCustomer",
  components: {
    SearchCriteria,
    ShowData,
    Assignment,
    ScreenList,
  },
  data() {
    return {
      message: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      tableList: [
        {
          prop: "customerId",
          label: "获客来源",
        },
        {
          prop: "phone",
          label: "手机",
        },
        {
          prop: "wechatNo",
          label: "微信号",
        },
        {
          prop: "gender",
          label: "性别",
        },
        {
          prop: "followStage",
          label: "跟进阶段",
        },
        {
          prop: "distributionState",
          label: "分配状态",
        },
        {
          prop: "follower",
          label: "跟进人",
        },
        {
          prop: "wecomAddState",
          label: "企微添加状态",
        },
        {
          prop: "customerWay",
          label: "获客来源",
        },
      ],
      total: 0,
      // 展示数据项
      dialogFormVisible: false,
      loadingrefresh: false,
      // 分配
      assignTotal: null,
      isAssignDisable: true,
      // 侧边筛选
      dialogLeft: false,
      // 性别
      genderOptions: [],
      dictOptions: [
        { dict: "follow_states", list: [], label: "followStage" },
        { dict: "marital", list: [], label: "marital" },
        { dict: "education", list: [], label: "education" },
        { dict: "job_type", list: [], label: "job" },
        { dict: "nationality", list: [], label: "nationality" },
        { dict: "friend_status", list: [], label: "friendStatus" },
        { dict: "customer_grade", list: [], label: "customerGrade" },
        { dict: "is_bind_wechat", list: [], label: "isBindWechat" },
        { dict: "distribution_state", list: [], label: "distributionState" },
        { dict: "wecom_add_state", list: [], label: "wecomAddState" },
        { dict: "customer_state", list: [], label: "customerState" },
      ],
    };
  },
  created() {
    this.getDicts("gender").then((res) => {
      if (res.code === 200) {
        this.genderOptions = res.data;
      }
    });
    this.getDictOptions();
  },
  mounted() {
    this.$refs.child.search();
    this.getDataList();
  },
  methods: {
    handleSizeChange(val) {
      this.message.pageNum = 1;
      this.message.pageSize = val;
      this.getList()
    },
    handleCurrentChange(val) {
      this.message.pageNum = val;
      this.getList()
    },
    handleSelectionChange(value) {
      this.tableSelectList = value;
      this.assignTotal = value.length;
      //分配按钮置灰
      if (value.length > 0) {
        this.isAssignDisable = false;
      } else {
        this.isAssignDisable = true;
      }
    },
    // 展示数据项
    openShowList() {
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$refs.showDataList.getLabelList();
      }, 100);
    },
    getDataList(value) {
      // 接收展示数据项
      this.dialogFormVisible = false;
      const siftList = JSON.parse(sessionStorage.getItem("siftList"));
      if (siftList) {
        this.tableList = siftList;
        // 在数据更新后执行
        this.$nextTick(() => {
          if (this.$refs.mainTable && this.$refs.mainTable.doLayout) {
            this.$refs.mainTable.doLayout();
          }
        });
      }
    },
    // 接收侧边筛选
    getScreenList(value) {
      const params = {
        ...this.message,
        pageType: "4",
        ...value,
      };
      this.getInfo(params);
    },
    getList() {
      this.$refs.child.search();
    },
    getMessage(value) {
      const params = {
        ...this.message,
        pageType: "4",
        ...value,
      };
      this.getInfo(params);
    },
    getInfo(params) {
      // 获取信息列表
      this.loadingrefresh = true;
      getAllCustomerInfo(params)
        .then((res) => {
          if (res.code === 200) {
            res.rows.forEach((element) => {
              element.gender = this.selectDictLabel(
                this.genderOptions,
                element.gender
              );
              this.dictOptions.forEach((item) => {
                element[item.label] = this.selectDictLabel(
                  item.list,
                  element[item.label]
                );
              });
            });
            this.tableData = res.rows;
            this.total = res.total;
            this.loadingrefresh = false;
          }
        })
        .catch(() => {
          console.log("error");
          this.loadingrefresh = false;
        });
    },
    getDictOptions() {
      this.dictOptions.forEach((item) => {
        this.getDicts(item.dict).then((res) => {
          if (res.code === 200) {
            item.list = res.data;
          }
        });
      });
    },
    // 分配
    openAssignment() {
      this.$refs.assignment.openDialog();
    },
    getAssignInfo(value) {
      let sidList = [];
      this.tableSelectList.forEach((item) => {
        sidList.push({ sid: item.sid });
      });
      const params = {
        sidList,
        ...value,
      };
      // 分配接口请求
      distributeCus(params)
        .then((res) => {
          if (res.code === 200) {
            this.$refs.assignment.openResultDialog();
          }
        })
        .catch(() => {
          console.log("error submit!!");
        });
    },
    getResult() {
      this.$refs.child.search();
    },
    // 侧边栏筛选
    openDialogLeft() {
      this.dialogLeft = true;
    },
    closeDialogLeft() {
      this.dialogLeft = false;
    },
    getKeepList() {
      // 接收侧边栏保存
      this.closeDialogLeft();
      this.$refs.child.getLabelList();
    },
    // 详情
    handleClick(rows) {
      this.$router.push({
        path: "customerDetails",
        query: {
          sid: rows.sid,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";
.highSeasCustomer {
  .main {
    background: #fff;
    padding: 0px 20px 20px 20px;
    margin-top: 16px;

    .top {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .daoru {
        margin: 0 3px;
      }

      .el-checkbox {
        margin: 0 10px;
      }
    }
  }

  .shuai {
    font-size: 15px;
  }

  .import-template {
    color: rgba(15, 64, 245, 1);
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 30px;
    display: inline-block;
  }

  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #cdf3df !important;
    color: #06c160 !important;
  }

  .el-tag.el-tag--warning {
    background-color: #fdedee !important;
    border-color: #fadcde !important;
    color: #f46539 !important;
  }

  .wecomAdd1 {
    color: #666666;
  }

  .wecomAdd2 {
    color: #082aff;
  }

  .wecomAdd3 {
    color: #cccccc;
  }
}

::v-deep {
  .el-drawer__header {
    font-size: 16px;
    color: rgba(16, 16, 16, 1);
  }

  .demo-drawer {
    top: 60px;
  }

  .el-checkbox__label {
    width: 100%;
  }
}
</style>
